<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>智能财务管理系统</title>
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <link href="css/manage.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <div class="header">
        <div class="logo">
            <i class="fas fa-chart-line fa-2x"></i>
            <h1>智能后台</h1>
        </div>
        <div class="user-info">
            <button id="generateReport"
                    style="margin-right:10px;background:#2ecc71;color:white;border:none;padding:5px 10px;border-radius:3px;cursor:pointer">
                生成数据报告
            </button>
            <button class="return-home-btn">返回主页</button>
            你好，<span id="currentUname"></span>
        </div>
    </div>

    <div class="main-content">
        <div class="sidebar">
            <h3>导航菜单</h3>
            <div class="menu-item" data-target="content-area">财务报表</div>
            <!--      <div class="menu-item" data-target="manage">数据查询</div>-->
            <div class="menu-item" data-target="market-trend">数据分析</div>
            <div class="menu-item" onclick="ccc()">
                <i class="fas fa-chart-pie"></i>
                <span>进入大厅</span>
            </div>
        </div>

        <div class="content-area" style="display: block;">
            <div class="content-header">
                <h2>财务概览</h2>
            </div>

            <div class="search-container">
                <input class="date-input" id="start-date" placeholder="开始日期" type="date">
                <input class="date-input" id="end-date" placeholder="结束日期" type="date">
                <!-- 添加唯一标识 -->
                <button class="btn btn-primary" id="financial-query-btn">
                    <i class="fas fa-search"></i>
                    <span>查询</span>
                </button>
            </div>

            <div class="stats-container">
                <div class="stat-card card-primary" id="total-revenue">
                    <h3>总收入</h3>
                    <div class="value">¥--</div>
                    <div class="change positive">
                        <i class="fas fa-arrow-up"></i>
                        <span>--% 较上月</span>
                    </div>
                </div>
                <div class="stat-card card-danger" id="total-expenses">
                    <h3>总支出</h3>
                    <div class="value">¥--</div>
                    <div class="change negative">
                        <i class="fas fa-arrow-up"></i>
                        <span>--% 较上月</span>
                    </div>
                </div>
                <div class="stat-card card-success" id="total-profit">
                    <h3>净利润</h3>
                    <div class="value">¥--</div>
                    <div class="change positive">
                        <i class="fas fa-arrow-up"></i>
                        <span>--% 较上月</span>
                    </div>
                </div>
                <div class="stat-card card-warning" id="pending-bills">
                    <h3>待处理账单</h3>
                    <div class="value">--</div>
                </div>
            </div>

            <!-- 在 manage1.html 中添加三个图表容器 -->
            <div class="card">
                <div class="card-header">
                    <i class="line-chart-icon"></i> 收入趋势
                </div>
                <div id="income-chart" style="height:300px"></div>
            </div>

            <div class="card">
                <div class="card-header">
                    <i class="line-chart-icon"></i> 支出分析
                </div>
                <div id="expense-chart" style="height:300px"></div>
            </div>

            <div class="card">
                <div class="card-header">
                    <i class="line-chart-icon"></i> 利润预测
                </div>
                <div id="profit-chart" style="height:300px"></div>
            </div>
        </div>


        <div class="manage" style="display:none;">
            <div class="carmanage">
                <div class="section" id="viewCarsSection">
                    <div class="search-container">
                        <input class="search-input" id="searchId" placeholder="输入车辆ID查询" type="number">
                        <button class="search-btn" id="searchById">
                            <i class="fas fa-search"></i> 查询
                        </button>
                    </div>

                    <div class="button-container">
                        <button id="querySoldCars">查看已售出车辆</button>
                        <button id="queryUnsoldCars">查看未售出车辆</button>
                        <button id="queryAllCars">查看所有车辆</button>
                    </div>

                    <div class="filter-container">
                        <h2>高级筛选</h2>
                        <div class="filter-group">
                            <label for="idRangeStart">ID区间（起始）：</label>
                            <input class="filter-input" id="idRangeStart" placeholder="起始ID" type="number">
                        </div>
                        <div class="filter-group">
                            <label for="idRangeEnd">ID区间（结束）：</label>
                            <input class="filter-input" id="idRangeEnd" placeholder="结束ID" type="number">
                        </div>
                        <div class="filter-group">
                            <label for="cname">品牌：</label>
                            <input class="filter-input" id="cname" placeholder="车辆品牌" type="text">
                        </div>
                        <div class="filter-group">
                            <label for="color">颜色：</label>
                            <input class="filter-input" id="color" placeholder="车辆颜色" type="text">
                        </div>
                        <div class="filter-group">
                            <label for="priceRangeStart">价格区间（起始）：</label>
                            <input class="filter-input" id="priceRangeStart" placeholder="起始价格" type="number">
                        </div>
                        <div class="filter-group">
                            <label for="priceRangeEnd">价格区间（结束）：</label>
                            <input class="filter-input" id="priceRangeEnd" placeholder="结束价格" type="number">
                        </div>
                        <div class="filter-group">
                            <label for="timeRangeStart">时间区间（起始）：</label>
                            <input class="filter-input" id="timeRangeStart" type="datetime-local">
                        </div>
                        <div class="filter-group">
                            <label for="timeRangeEnd">时间区间（结束）：</label>
                            <input class="filter-input" id="timeRangeEnd" type="datetime-local">
                        </div>
                        <button class="filter-btn" id="applyFilter">应用筛选</button>
                        <button class="filter-btn" id="resetFilter">重置筛选</button>
                    </div>

                    <!-- 查询结果显示区域 -->
                    <div class="search-result" id="searchResult">
                        <table>
                            <!-- 表格内容 -->
                        </table>
                        <!-- 加载状态示例 -->
                        <div class="loading-mask" style="display: none;">
                            <div class="loading-spinner"></div>
                        </div>
                    </div>
                    <div id="soldCars" style="display: none;">
                        <table>
                            <!-- 表格内容 -->
                        </table>
                        <!-- 加载状态示例 -->
                        <div class="loading-mask" style="display: none;">
                            <div class="loading-spinner"></div>
                        </div>
                    </div>
                    <div id="unsoldCars" style="display: none;">
                        <table>
                            <!-- 表格内容 -->
                        </table>
                        <!-- 加载状态示例 -->
                        <div class="loading-mask" style="display: none;">
                            <div class="loading-spinner"></div>
                        </div>
                    </div>
                    <div id="allCars" style="display: none;">
                        <table>
                            <!-- 表格内容 -->
                        </table>
                        <!-- 加载状态示例 -->
                        <div class="loading-mask" style="display: none;">
                            <div class="loading-spinner"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="market-trend" style="display: none;">
            <div class="dashboard">
                <!-- 颜色分布 -->
                <div class="chart-card">
                    <div class="chart-title">车辆颜色分布图</div>
                    <div class="chart-container" id="colorChart"></div>
                    <div class="analysis" id="colorAnalysis"></div>
                </div>

                <!-- 价格分布 -->
                <div class="chart-card">
                    <div class="chart-title">价格区间分布图</div>
                    <div class="chart-container" id="priceChart"></div>
                    <div class="analysis" id="priceAnalysis"></div>
                </div>

                <!-- 品牌销售 -->
                <div class="chart-card">
                    <div class="chart-title">各品牌销售占比图</div>
                    <div class="chart-container" id="brandChart"></div>
                    <div class="analysis" id="brandAnalysis"></div>
                </div>

                <!-- 趋势图 -->
                <div class="chart-card">
                    <div class="chart-title">月度销售趋势图</div>
                    <div class="chart-container" id="trendChart"></div>
                    <div class="analysis" id="trendAnalysis"></div>
                </div>
            </div>
        </div>
    </div>


</div>


</div>
<script src="jsjs/manage.js"></script>
<script src="jsjs/kan.js"></script>

</body>
</html>